import React, { useEffect, useState } from 'react';
import './index.less';
import type { ScWaterFallProps } from './types';
function updateColList(
  list:any[],
  colNum: number,
  colWidth:number,
) {
  
  //二维数组每一列代表着一个瀑布流
  const colList: any[] = [];
  //一维数组存储每一列
  const heightList:number[] = [];
  
    //初始化每一列数据
    new Array(colNum).fill('').forEach(() => {
      colList.push([]);
      //初始每一列高度0
      heightList.push(0);
    });
  
  function findLowIndex(){
    let MH=Number.MAX_SAFE_INTEGER
    let lowIndex:number=0
    for(let i=0;i<heightList.length;i++){
        if(heightList[i]<MH){
            MH=heightList[i]
            lowIndex=i
        }

    }
    return lowIndex
  }
 
    //每次找到最低的那一列索引，更新高度列表，往最低列push一个数据
    list.forEach((item,index)=>{
        const lowIndex=findLowIndex()
         item.displayHeight=item.height/item.width*colWidth
        colList[lowIndex].push(item)
        heightList[lowIndex]+=item.displayHeight
    })
  
  return colList;
}
const ScWaterFall: <T extends ScWaterFallProps = ScWaterFallProps>(
  props: T,
) => JSX.Element = (props) => {
    
  // const firstRenderList=list.length>10?list.splice(0,10):list
  const { list, colNum, gap, width } = props;
  const defaultColWidth = Math.floor((width - (colNum - 1) * gap) / colNum);
  const [colList, setColList] = useState(
    updateColList(list, colNum,defaultColWidth),
  );

  useEffect(() => {
   
    setColList(updateColList(list,colNum,defaultColWidth))
  }, [list,colNum,gap,width]);
  // useEffect(()=>{

  //     const itemList=document.querySelectorAll('.sc-waterfall-item')
  //     console.log(itemList)
  //     const io=new IntersectionObserver((entries)=>{
  //         entries.forEach((entry)=>{
  //             if(entry.isIntersecting){
  //                 console.log('进入视野')
  //                 console.log(entry.rootBounds)
  //                 entry.target.style.width="48%"
  //                 entry.target.style.height='auto'
  //                const itemImg= entry.target.querySelector('img') as HTMLImageElement
  //                itemImg.src=itemImg?.dataset.src as string
  //                if(entry.intersectionRatio===1){
  //                 console.log(1)
  //                 io.unobserve(entry.target)
  //                }

  //             }
  //         })
  //     },{
  //         root:document.querySelector('.sc-waterfall-wrap'),
  //         // rootMargin:'0px 0px 200px 0px',
  //     })
  //     itemList.forEach((item)=>{
  //         io.observe(item)
  //     })
  // },[renderList])

  return (
    <div className="sc-waterfall-wrap" style={{width:width+'px',gap:gap+'px'}}>
      {colList.map((col, index) => {
        return (
          <ul key={index} className="sc-waterfall-item" style={{ width: defaultColWidth + 'px' }}>
            {col.map((item, i) => {
              return (
                <li key={index+"-"+i}>
                  <img
                    src={item.src}
                    data-src={item.src}
                    alt="图片"
                    style={{ width: "100%", height:Math.floor(item?.displayHeight*0.8)+'px'}}
                  />
                  <div
                    style={{ width: '100%', fontSize: '17px', fontWeight: 800 }}
                  >
                    {item.title}
                  </div>
                  <div style={{ width: '100%' }}>{item.description}</div>
                </li>
              );
            })}
          </ul>
        );
      })}
    </div>
  );
};
export default ScWaterFall;
